<template>
	<view>
		<view class="no-sensor">
			<view class="u-f-jsb">
				<text>所属加注站</text>
				<text>{{ site.siteName }}</text>
			</view>
			<view class="u-f-jsb">
				<text>设备编号</text>
				<text>{{ site.macCode }}</text>
			</view>
			<view class="u-f-jsb">
				<text>补液时间</text>
				<view @tap="toggleTimePicker">
					<text class="c-gray">{{ supplyTime }}</text>
					<u-picker
						mode="time"
						v-model="show"
						:params="params"
						:default-time="defaultTime"
						@confirm="timeSelect"
					></u-picker>
				</view>
			</view>
			<view class="u-f-jsb">
				<text>本次补液量(吨)</text>
				<input
					v-model.trim="supplyAmount"
					style="text-align: right;"
					placeholder-class="c-gray"
					type="digit"
					placeholder="请输入补液量(吨)"
				/>
			</view>
			<view class="u-f-jsb">
				<text style="white-space: nowrap;">供应商</text>
				<input
					v-model.trim="supplier"
					style="text-align: right;"
					type="text"
					placeholder-class="c-gray"
					placeholder="请输入供应商"
				/>
			</view>
			<view class="">
				<view style="margin-bottom: 30rpx;">上传补液单据</view>
				<u-upload
					ref="uUpload"
					:action="action"
					:header="header"
					:max-count="1"
					:auto-upload="true"
					@on-uploaded="handleUploaded"
					width="150"
					height="150"
				></u-upload>
			</view>
			<view class="btn"><button type="default" @tap="addRecord">确认</button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		let action =
			process.env.NODE_ENV === 'development'
				? 'http://192.168.1.34:9666/sqyx/factory/uploadRecordImage'
				: 'https://api.etubang.com/sqyx/factory/uploadRecordImage';
		let header = {
			Authorization: uni.getStorageSync('token')
		};
		return {
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true
			},
			defaultTime: '',
			action,
			header,
			supplyTime: '请选择补液时间', // 补液时间
			supplyAmount: '', // 补液量（吨）
			supplier: '', // 供应商
			site: {},
			show: false ,// 显示时间选择器
		};
	},
	onLoad(options) {
		console.log(decodeURIComponent(options.site));
		this.site = JSON.parse(decodeURIComponent(options.site));
	},
	onReady() {
		// 初始化时间选择器时间
		const time = this.$u.timeFormat(Date.now(), 'yyyy-mm-dd hh:MM');
		console.log(time);
		this.defaultTime = time;
	},
	methods: {
		addRecord() {
			const { supplyTime, supplyAmount, supplier, imageUrl } = this;
			if (supplyTime === '请选择补液时间') {
				return this.$u.toast('请选择补液时间');
			}
			if (!supplyAmount) {
				return this.$u.toast('请填写补液量');
			}
			if (!supplier) {
				return this.$u.toast('请填写供应商');
			}
			if (!imageUrl) {
				return this.$u.toast('请上传补液单据');
			}
			this.$u.api
				._addSupplyRecord({
					siteId: this.site.siteId,
					bucketId: this.site.bucketId,
					recordTime: supplyTime,
					recordNum: parseInt(supplyAmount*1000),
					operatorName: supplier,
					imageUrl
				})
				.then(res => {
					uni.showModal({
						content: '补液记录添加成功！',
						showCancel: false,
						success: () => {
							uni.navigateBack({
								success:()=>{
									setTimeout(()=>{
										uni.$emit('supplyFinished', {siteId:this.site.siteId, supplyAmount: supplyAmount*1000 });
									},300)
								}
							});
						}
					});
				});
		},
		timeSelect(time) {
			//时间选择器返回对象 {year: "2021", month: "02", day: "24", hour: "11", minute: "28"}
			console.log(time);
			const { year, month, day, hour, minute } = time;
			this.supplyTime = `${year}-${month}-${day} ${hour}:${minute}:00`;
		},
		toggleTimePicker() {
			this.show = !this.show;
		},
		handleUploaded(list) {
			console.log(list);
			if (!list[0].error) {
				this.imageUrl = list[0].response.data;
			}
		}
	}
};
</script>

<style lang="scss">
.no-sensor {
	padding: 0 30rpx 30rpx 30rpx;
	font-size: 34rpx;
	color: #333333;

	& > view:not(:last-child) {
		margin: 20rpx 0;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #e4e7ed;
	}

	.btn {
		position: fixed;
		bottom: 100rpx;
		width: calc(100vw - 60rpx);

		button {
			background-color: #007aff;
			color: #ffffff;
		}
	}
}
</style>
